<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态列表 - 原生JavaScript</title>
    <style>
        #app {
            width: 300px;
            margin: 0 auto;
            text-align: center;
        }
        #fruits {
            list-style: none;
            padding: 0;
        }
        #fruits li {
            margin-bottom: 10px;
        }
        #fruits li:hover {
            background-color: #f0f0f0;
            cursor: pointer;
        }
        #fruits li.selected {
            background-color: #4CAF50;
            color: white;
        }
        #fruits li.selected:hover {
            background-color: #4CAF50;
        }
        #fruits li:active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul id="fruits">
            <li v-for="fruit in fruits" :key="fruit" @click="removeItem(fruit)">{{fruit}}</li>
        </ul>
        <div>
            <input type="text" v-model="fruitName" @keydown.enter="addItem()">
            <button id="ok" @click="addItem()">确定</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                fruits: ['苹果', '香蕉', '榴莲'],
                fruitName: ''
            },
            methods: {
                removeItem(fruit) {
                    this.fruits.splice(this.fruits.indexOf(fruit), 1);
                },
                addItem() {
                    let name = this.fruitName.trim();
                    if (name.length > 0) {
                        this.fruits.push(name);
                    }
                    this.fruitName = '';
                }
            }
        })
    </script>
    

</body>
</html>